<template>
  <div class="box">
   
    <div class="box-right">
      <!--全网医疗设备实时交易  -->
      <div class="statistic3">
        <div class="top-4">全网医疗设备实时交易</div>
        <div class="top-5">
          <div style="display: flex; width: 254px">
            <div class="shu"></div>
            <div>
              <div class="shu-1">{{ treatmentList1 }}</div>
              <div class="shu-2">中标数量</div>
            </div>
          </div>
          <div style="display: flex; width: 254px">
            <div class="shu"></div>
            <div>
              <div class="shu-1">
                {{ Math.floor(treatmentList2 / 100000000) }}
              </div>
              <div class="shu-2">中标总金额（亿元）</div>
            </div>
          </div>
          <div style="display: flex; width: 254px">
            <div class="shu"></div>
            <div>
              <div class="shu-1">{{ treatmentList3 }}</div>
              <div class="shu-2">经销商数量</div>
            </div>
          </div>
          <div style="display: flex; width: 254px">
            <div class="shu"></div>
            <div>
              <div class="shu-1">{{ treatmentList4 }}</div>
              <div class="shu-2">亿元数量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistic4" style="display: flex">
        <!-- <div ref="chinaMap" style="height: 600px; width: 100%">
                    地图1
                  </div> -->
        <div class="dt-left">
          <div class="top-4">热门设备销量分布</div>
          <div class="rm-bnt" style="margin-left: -10px">
            <div
              class="bnt"
              :class="{ checkeds: activea == '病人监护仪' }"
              @click="Jumpa('病人监护仪')"
            >
              病人监护仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: activea == '彩色多普勒超声诊断仪' }"
              @click="Jumpa('彩色多普勒超声诊断仪')"
            >
              彩色多普勒超声诊断仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: activea == '血液透析设备' }"
              @click="Jumpa('血液透析设备')"
            >
              血液透析设备
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: activea == '麻醉机' }"
              @click="Jumpa('麻醉机')"
            >
              麻醉机
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: activea == '心电图机' }"
              @click="Jumpa('心电图机')"
            >
              心电图机
            </div>
          </div>
          <div class="heng"></div>
          <div ref="chinaMap" style="aspect-ratio: 3/2;">地图1</div>
        </div>
        <div class="dt-right">
          <div style="display: flex; line-height: 32px">
            <div>{{ activea }}</div>
            <div class="paih">全国销量排行</div>
            <div class="xq">
              <el-button>查看详情</el-button>
            </div>
          </div>
          <div id="Bar" style="width: 100%; height: 500px"></div>
        </div>
        <!-- </div> -->
      </div>
      <!-- <div style="width:1px; background: #DDDDDD;"></div> -->
      <div class="statistic6" style="display: flex">
        <div class="statistic5" style="width: 50%; height: 582px">
          <div class="top-4" style="margin-left: 20px">热门设备品牌占比</div>
          <div class="rm-bnt" style="margin-left: 10px">
            <div
              class="bnt"
              style="font-size:16px"
              :class="{ checkeds: actives == '病人监护仪' }"
              @click="Jump('病人监护仪')"
            >
              病人监护仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives == '彩色多普勒超声诊断仪' }"
              @click="Jump('彩色多普勒超声诊断仪')"
            >
              彩色多普勒超声诊断仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives == '血液透析设备' }"
              @click="Jump('血液透析设备')"
            >
              血液透析设备
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives == '麻醉机' }"
              @click="Jump('麻醉机')"
            >
              麻醉机
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives === '心电图机' }"
              @click="Jump('心电图机')"
            >
              心电图机
            </div>
          </div>
          <div class="heng"></div>
          <div
            id="Pie1"
            style="width: 100%; height: 450px; margin-left: 30px"
          ></div>

          <!-- </div> -->
        </div>
        <div
          class="statistic5"
          style="width: 50%; height: 582px; margin-left: 20px"
        >
          <div class="top-4" style="margin-left: 20px">
            热门设备单价区间分布
          </div>
          <div class="rm-bnt" style="margin-left: -10px">
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives1 == '病人监护仪' }"
              @click="Jumps('病人监护仪')"
            >
              病人监护仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives1 === '彩色多普勒超声诊断仪' }"
              @click="Jumps('彩色多普勒超声诊断仪')"
            >
              彩色多普勒超声诊断仪
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives1 === '血液透析设备' }"
              @click="Jumps('血液透析设备')"
            >
              血液透析设备
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives1 == '麻醉机' }"
              @click="Jumps('麻醉机')"
            >
              麻醉机
            </div>
            <div
              class="bnt"
              style="margin-left: 20px; font-size: 16px"
              :class="{ checkeds: actives1 == '心电图机' }"
              @click="Jumps('心电图机')"
            >
              心电图机
            </div>
          </div>
          <div class="heng"></div>
          <div
            id="Pie2"
            style="width: 100%; height: 450px; margin-left: 30px"
          ></div>

          <!-- </div> -->
        </div>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title=""
      width="1000"
      :before-close="handleClose"
      show-cancel="false"
    >
      <div class="tk">
        <div class="tk-left">
          <div class="tk-1">医疗器械行业采供销利器</div>
          <div class="tk-2">
            通过对海量标讯中的医疗器械（名称、品牌、型号、单位、单价、数量等）信息的自动挖掘，经过人工审核，构建全面准确的「医院-经销商-生产厂商」的医疗器械采供销关系网。在市场情报、经销商&生产商拓展、招投标支持等方面，提供精准的信息和决策支持。
          </div>
          <div class="tk-3">
            <div class="tk-4">
              <div class="tk-5">
                <img src="../../../../assets/img/组 5895@2x.png" alt="" />
              </div>
              <div class="tk-6">20万+医疗器械经销商高效拓展渠道</div>
            </div>
            <div class="tk-4" style="margin-left: 20px">
              <div class="tk-5">
                <img src="../../../../assets/img/组 5899@2x.png" alt="" />
              </div>
              <div class="tk-6">20万+医疗器械经销商高效拓展渠道</div>
            </div>
            <div class="tk-4" style="margin-left: 20px">
              <div class="tk-5">
                <img src="../../../../assets/img/组 5898@2x.png" alt="" />
              </div>
              <div class="tk-6">20万+医疗器械经销商高效拓展渠道</div>
            </div>
          </div>
          <div class="tk-7">
            <a-buttom>联系电话：158-5557-3332</a-buttom>
          </div>
        </div>
        <div class="tk-right">
          <div class="qx" @click="qx_btn()">
            <img src="../../../../assets/img/组 4909@2x.png" alt="" />
          </div>
          <div style="margin: 0 40px">
            <div class="tk-1">更多医疗版详情</div>
            <div class="tk-2" style="text-align: center; height: 14px">
              请完善基本信息，我们会尽快联系您
            </div>
            <div class="name">
              <img src="../../../../assets/img/组 5891@2x.png" alt="" />
              <el-input v-model="input1" placeholder="请输入名称" />
            </div>
            <div class="name">
              <img src="../../../../assets/img/组 5892@2x.png" alt="" />
              <el-input v-model="input2" placeholder="请输入手机号" />
            </div>
            <div class="name">
              <img src="../../../../assets/img/联合 46@2x.png" alt="" />
              <el-input v-model="input3" placeholder="请输入公司名称" />
            </div>
            <div class="name">
              <img src="../../../../assets/img/组 5893@2x.png" alt="" />
              <el-input v-model="input4" placeholder="请输入职位" />
            </div>
            <div class="tk-8" @click="submit()">
              <a-buttom>立即提交</a-buttom>
            </div>
          </div>
        </div>
      </div>
      <!-- <span>This is a message</span> -->
      <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template> -->
    </el-dialog>
  </div>
  <!-- <Fot></Fot> -->
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
// import {  } from "@/utils/index";
import { moneys, timestamp } from "../../../../utils/index";
import { Hospital } from "../../../../Api/complete/index.js";
import { useRouter } from "vue-router";
import chinaJSON from "../../../../assets/json/china.json";
import {
  equipment_transaction,
  zb_equipment,
  hot_brand_price,
  hot_brand,
  equipment_region,
  add_contacts,
} from "../../../../Api/medical/index.js";
import { getHotSearch } from "../../../../Api/homePage/index.js";
import Fot from "../../../../components/fotter/index.vue";
import * as echarts from "echarts";
import { onMounted, onUnmounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { money1 } from "../../../../utils/index";
import axios from "axios";
const router = useRouter();
const hot = ref([
  {
    hot_name: "病人监护仪",
  },
  {
    hot_name: "彩色多普勒超声诊断仪",
  },
  {
    hot_name: "血液透析设备",
  },
  {
    hot_name: "麻醉机",
  },
  {
    hot_name: "心电图机",
  },
]);
const primary = ref("primary");
onMounted(() => {
  // num1();
  // num3();
  ditu();
  MapBar();
  // drawChina();
  a1();
  a2();
});
//提交
const submit = () => {
  console.log(1);

  const form = reactive({
    name: input1.value,
    phone: input2.value,
    company_name: input3.value,
    position: input4.value,
  });
  add_contacts(form).then((res) => {
    if (res.data.code == 1) {
      ElMessage.success({
        message: "提交成功",
        type: "success",
      });
      qx_btn();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
const input1 = ref();
const input2 = ref();
const input3 = ref();
const input4 = ref();
const actives = ref("病人监护仪");
const actives1 = ref("病人监护仪");
const activea = ref("病人监护仪");

const dialogVisible = ref(false);
const handleClose = () => {};
const type = (event) => {
  if (event == 10) {
    return "病人监护仪";
  }
  if (event == 20) {
    return "彩色多普勒超声诊断仪";
  }
  if (event == 30) {
    return "血液透析设备";
  }
  if (event == 40) {
    return "麻醉机";
  }
  if (event == 50) {
    return "心电图机";
  }
};
//全网医疗设备实时交易
const treatmentList1 = ref();
const treatmentList2 = ref();
const treatmentList3 = ref();
const treatmentList4 = ref();
equipment_transaction().then((res) => {
  if (res.data.code == 1) {
    treatmentList1.value = res.data.data.zb_num.value;
    treatmentList2.value = res.data.data.jg_num.value;
    treatmentList3.value = res.data.data.gongying_num.value;
    treatmentList4.value = res.data.data.yiyuan_num.value;
  } else {
    ElMessage.error(res.data.msg);
  }
});

//全网医疗设备实时交易
// const treatmentList = ref() as any
zb_equipment().then((res) => {
  if (res.data.code == 1) {
    // console.log( Array.from(res.data.data));
    tableData.value = Array.from(res.data.data);
    console.log(tableData.value);

    //  .push()
    // res.data.data.forEach(element => {
    //   tableData.push(element.products[0],element.release_time)

    // });
  } else {
    ElMessage.error(res.data.msg);
  }
});

// 热门设备单价区间分布
hot_brand_price().then((res) => {
  if (res.data.code == 1) {
    console.log(res);
  } else {
    ElMessage.error(res.data.msg);
  }
});
let data1 = [];
const china = ref();
let yData1 = [];
let barData = [];

// 地图
const chinaMap = ref();
function MapBar(data1) {
  var myChart = echarts.init(chinaMap.value);
  echarts.registerMap("china", chinaJSON as any); //注册可用的地图
  var option = {
    title: [
      {
        show: true,
        text: "",
        textStyle: {
          color: "#2D3E53",
          fontSize: 18,
        },
        right: 150,
        top: 300,
      },
    ],
    tooltip: {
      show: true,
      formatter: (params: any) => {
        // console.log(params, "dwweqweqw");
        // console.log(aaaa, "2222");
        return params.name + "：" + params.data["value"];
      },
    },

    // 地图
    geo: {
      map: "china",
      left: "100",
      right: "500",
      // zoom: 1, //地图显示比例
      // top: 60, //地图距离上边框距离
      layoutSize: '80% 80%',
      roam: true, //是否开启平游或缩放
    scaleLimit: { //滚轮缩放的极限控制
      min: 1,
      max: 2
    },
      label: {
        emphasis: {
          //   show: false,
          areaColor: "#55b89e", //鼠标移入颜色
          shadowOffsetX: 0, //阴影水平方向上偏移量
          shadowOffsetY: 0, //阴影垂直方向上偏移量
          borderWidth: 0, //描边现况宽
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(13, 38, 77, .3)",
          borderWidth: 1,
          areaColor: "#c5e7de",
        },
        emphasis: {
          areaColor: "#55b89e",
        },
      },
    },
    series: [
      {
        name: "mapSer",
        type: "map",
        roam: false,
        geoIndex: 0,
        label: {
          show: false,
        },
        // data: dBar.value,
        data: data1,
      },
    ],
  };
  myChart.setOption(option);
    // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    // Chart2.resize();
    Chart3.resize();
  });
}
// 地图
const ditu = () => {
  const from = reactive({
    product_name: activea.value,
  });
  equipment_region(from).then((res) => {
    if (res.data.code == 1) {
      data1 = res.data.data;
      // console.log(data1);
      barData = [];
      yData1 = [];
      for (var i = 0; i < 10; i++) {
        // i.name = i.name
        barData.push(data1[i]);
        yData1.push(i + data1[i].name.slice(0, 2));
      }
      MapBar(data1);
      num3(barData, yData1);
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const qx_btn = () => {
  dialogVisible.value = false;
  active.value = 10;
};
const Jump = (event) => {
  actives.value = event;
  a2();
};
const Jumps = (event) => {
  actives1.value = event;
  a1();
  // console.log(actives1.value);

  // console.log(event);

  // actives1.value = event;
};
const Jumpa = (event) => {
  activea.value = event;
  ditu();
};
// 地图

// 饼图 各类采购商采购金额占比
function num1(resPie1) {
  // 基于准备好的dom，初始化echarts实例
  let Chart2 = echarts.init(document.getElementById("Pie1"));
  // let Chart3 = echarts.init(document.getElementById("Pie2"));
  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      left: "center",
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "auto",
      bottom: 0,
    },
    series: [
      {
        name: actives.value,
        type: "pie",
        radius: "50%",
        data: resPie1,
        bottom: 0, // 将图例放置在图表下方
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  Chart2.setOption(options);
  onUnmounted(() => {
    Chart2.dispose();
  });
  // Chart3.setOption(options);
  // onUnmounted(() => {
  //   Chart3.dispose();
  // });
  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart2.resize();
    // Chart3.resize();
  });
}
function num2(resPie) {
  // 基于准备好的dom，初始化echarts实例
  // let Chart2 = echarts.init(document.getElementById("Pie1"));
  let Chart3 = echarts.init(document.getElementById("Pie2"));
  // 绘制图表
  let options = {
    title: {
      text: "",
      subtext: "",
      left: "center",
    },

    tooltip: {
      trigger: "item",
      show: true,
    },
    legend: {
      orient: "horizontal",
      left: "auto",
      bottom: 0,
      // formatter: function (name) {
      //   console.log(name);
      //   if (name == 0.0 - 10000.0) {
      //     return (name = "0-一万");
      //   }
      // },
    },
    series: [
      {
        name: actives1.value,
        type: "pie",
        radius: "50%",
        data: resPie,
        bottom: 0, // 将图例放置在图表下方
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  // 渲染图表
  // Chart2.setOption(options);
  // onUnmounted(() => {
  //   Chart2.dispose();
  // });
  Chart3.setOption(options);
  onUnmounted(() => {
    Chart3.dispose();
  });
  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    // Chart2.resize();
    Chart3.resize();
  });
}
const tablePie = ref([]);
// const tablePie1 = ref([]);

// 找设备
const device = () => {
  const href = router.resolve({
    path: "/search",
    query: {
      id: 4,
      pinaiID: 3,
      xmdw: "医院",
      sear: 10,
    },
  });
  window.open(href.href, "_blank");
};

// 找经销商
const dealer = () => {
  const href = router.resolve({
    path: "/search",
    query: {
      id: 2,
      xmdw: "医院",
    },
  });
  window.open(href.href, "_blank");
};

// 找生产商
const producer = () => {
  const href = router.resolve({
    path: "/search",
    query: {
      id: 4,
      xmdw: "医院",
    },
  });
  window.open(href.href, "_blank");
};

// 查医院
const hospital = () => {
  const href = router.resolve({
    path: "/search",
    query: {
      id: 3,
      Boos: "医院",
    },
  });
  window.open(href.href, "_blank");
};

function a1() {
  const from = reactive({
    product_name: actives1.value,
  });
  hot_brand_price(from).then((res) => {
    tablePie.value = res.data.data;
    const resPie = [] as any;

    res.data.data.map((item) => {
      resPie.push({ value: item.doc_count, name: item.key });
    });

    num2(resPie);
  });
}
// 热门品牌占比
function a2() {
  const from = reactive({
    product_name: actives.value,
  });
  hot_brand(from).then((res) => {
    // tablePie1.value = res.data.data;
    const resPie1 = [] as any;

    res.data.data.map((item) => {
      if (item.key == "") {
        item.key = "无品牌";
      }
      resPie1.push({ value: item.doc_count, name: item.key });
    });

    num1(resPie1);
  });
}
// 柱形图 纵向
const datas = [
  { name: "北京", value: "15", value1: "3000", value2: "30" },
  { name: "上海", value: "76", value1: "4000", value2: "40" },
  { name: "广州", value: "20", value1: "5823", value2: "50" },
  { name: "深圳", value: "40", value1: "3244", value2: "60" },
  { name: "武汉", value: "60", value1: "7000", value2: "70" },
  { name: "杭州", value: "21", value1: "7000", value2: "70" },
  { name: "济南", value: "33", value1: "8000", value2: "80" },
  { name: "重庆", value: "79", value1: "9000", value2: "90" },
  { name: "太原", value: "18", value1: "10000", value2: "100" },
  { name: "天津", value: "15", value1: "3000", value2: "30" },
];
const xData = datas.map((item) => item.name);
const yData = datas.map((item) => item.value);
const zData = datas.map((item) => item.value2);
const pData = datas.map((item) => item.value1);
const max = 100;
const maxData = [max, max, max, max, max, max, max, max, max, max]; //控制左边名字显示的数量

// 采购次数排行
function num3(yData1, barData) {
  // 基于准备好的dom，初始化echarts实例
  let Chart3 = echarts.init(document.getElementById("Bar"));
  console.log(barData);
  // 绘制图表
  var option = {
    title: [
      {
        show: true,
        text: "",
        textStyle: {
          color: "#2D3E53",
          fontSize: 18,
        },
        right: 150,
        top: 10,
      },
    ],
    tooltip: {
      show: true,
      formatter: (params: any) => {
        console.log(params, "dwweqweqw");
        // console.log(aaaa, "2222");
        return params.name.slice(2) + "：" + params.data["value"];
        // if (aaaa.value == 1) {
        //   return params.name + "：" + params.data["value"] + "%";
        // } else {
        //   return params.name + "：" + params.data["value"] + "%";
        // }
      },
    },
    grid: {
      // right: 50,
      left: 100,
      top: 100,
      bottom: 0,
      width: "60%",
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      type: "category",
      inverse: true,
      nameGap: 16,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#ddd",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 100,
        textStyle: {
          color: "#000",
          align: "left",
          fontSize: 14,
        },
        rich: {
          a: {
            color: "#fff",
            backgroundColor: "#FAAA39",
            width: 20,
            height: 30,
            align: "center",
            borderRadius: 2,
          },
          b: {
            color: "#fff",
            backgroundColor: "#4197FD",
            width: 20,
            height: 30,
            align: "center",
            borderRadius: 2,
          },
        },
        formatter: function (params) {
          if (parseInt(params.slice(0, 1)) < 3) {
            return [
              "{a|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          } else {
            return [
              "{b|" +
                (parseInt(params.slice(0, 1)) + 1) +
                "}" +
                "  " +
                params.slice(1),
            ].join("\n");
          }
        },
      },
      data: barData,
    },
    series: [
      {
        name: "barSer",
        type: "bar",
        roam: false,
        visualMap: false,
        zlevel: 2,
        barMaxWidth: 8,
        barGap: 0,
        label: {
        show: true,
        position: 'right',
        valueAnimation: true,
        formatter: function (params) {
          // console.log(params.value);
          
          return  params.value+"个"
        },
      },
        itemStyle: {
          areaColor: "#c5e7de",
          normal: {
            color: function (params) {
              // build a color map as your need.
              var colorList = [
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#FFD119", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFAC4C", // 100% 处的颜色
                    },
                  ],
                },
                {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00C0FA", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2F95FA", // 100% 处的颜色
                    },
                  ],
                },
              ];
              if (params.dataIndex < 3) {
                return colorList[0];
              } else {
                return colorList[1];
              }
            },
            barBorderRadius: 15,
          },
        },
        data: yData1,
      },
    ],
  };

  // 渲染图表
  Chart3.setOption(option);
  onUnmounted(() => {
    Chart3.dispose();
  });

  // 自适应
  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart3.resize();
  });
}

Hospital().then((res) => {
  if (res.data.code == 1) {
    lista.value = res.data.data;
    // hot.value = res.data.data;
    // console.log(hot.value);
  } else {
    // ElMessage.error(res.data.msg);
  }
});
getHotSearch().then((res) => {
  if (res.data.code == 1) {
    // hot.value = res.data.data;
    // console.log(hot.value);
  } else {
    // ElMessage.error(res.data.msg);
  }
});

const tableData = ref([]);
const lista = reactive([]) as any;
const list = reactive([
  { title: "病人监护仪" },
  { title: "彩色多普勒超声诊…" },
  { title: "血液透析设备" },
  { title: "麻醉机" },
  { title: "心电图机" },
]);
const list1 = reactive([
  { title: "173,566", name: "中标数量" },
  { title: "12,497", name: "中标总金额（亿元）" },
  { title: "60,863", name: "经销商数量" },
  { title: "6,508", name: "亿元数量" },
]);
const list2 = reactive([
  { name: "病人监护仪" },
  { name: "彩色多普勒超声诊断仪" },
  { name: "血液透析设备" },
  { name: "麻醉机" },
  { name: "心电图机" },
]);
const input = ref("");
const active = ref(10);
const Jump1 = () => {
  router.push({
    path: `/search/${input.value}`,
  });
};
const Jump2 = (event) => {
  // console.log(event);
  router.push({
    path: `/search/${event}`,
  });
};
const changeStatus = (number) => {
  active.value = number;
  if (number !== 10) {
    dialogVisible.value = true;
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // background-color: #fff;
  display: flex;
}
.box-right {
  overflow-y: scroll;
  width: 100%;
  position: relative;
  background-color: #f6f6f6;
}



:deep() {
  .el-input__wrapper {
    border: none !important;
    box-shadow: none !important;
  }

  .el-statistic__number {
    font-size: 34px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #f43107;
    opacity: 1;
  }

  .el-statistic {
    margin-top: 25px;
       margin-bottom: 10px;
  }
}

.title_2 {
  font-size: 34px;
  font-family: HYLingXinJ;
  font-weight: 400;
  line-height: 34px;
  color: #ffffff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  margin-left: 10px;
     margin-bottom: 10px;

  span {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #ffffff;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
  }
}




.statistic {
  width: 100%;
  height: 180px;
  // height: 25%;
  background: #ffffff;
  // box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  // //border-radius: 10px;
  margin: - 50px auto;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  padding: 35px 40px;
 
  // padding: 2% 40px;
  // left: 50%;
}

// @media screen and (max-width: 1440px) {
.statistic-1 {

  width: 250px;
  height: 110px;
  margin-right: 40px;
  img {
    width: 100%;
    height: 100%;
  }
}

.statistic1 {
  width: 100%;
  // min-width: 720px;
  // height: 432px;
  padding: 140px 0 0 0;
  // padding: calc(100vw * 140 / 1920) 0 0 0;
  // position: absolute;
  // top: 100%;
  margin: 0 auto;
  display: flex;

  .statistic1-left {
    width: 220px;
    margin-right: 20px;
  }

  .statistic1-right {
    width: calc(100% - 220px);
    // height: ;
    background-color: #ffffff;
  }
}

.statistic1-1 {
  width: 220px;
  height: 216px;
  background: linear-gradient(180deg, #fffbf4 0%, #ffffff 100%);
  // //border-radius: 8px;
  // margin-top: 144px;
}

.top-1 {
  display: flex;
  padding: 20px;
}

.rc {
  width: 14px;
  height: 16px;
  margin-right: 6px;

  img {
    width: 100%;
    height: 100%;
  }
}

.yy-rc {
  // width: 64px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #ffc670;
  margin-right: 50px;
  // line-height: 0px;
}

.yy-gd {
  // width: 32px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #667373;
  margin-right: 6px;
  // line-height: 0px;
}

.gd {
  width: 8px;
  height: 12px;

  img {
    width: 100%;
    height: 100%;
  }
}

.top-2 {
  //  display: flex;
  padding: 0 20px;
  font-size: 14px;
}

.top-item {
  display: flex;

  img {
    width: 13px;
    height: 14px;
  }

  .item1 {
    max-width: 143px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 6px;
  }
}

.right-top {
  // width: 1400px;
  height: 452px;
  padding: 20px 20px 0 20px;
}

.top-3 {
     margin-bottom: 10px;
}

.heng {
  width: 100%;
  height: 1px;
  background: #dddddd;
}

.table {
  margin-top: 20px;
  // height: 299px;
}

:deep() {
  .el-table__header tr {
    height: 46px;
  }

  .el-table__row {
    height: 46px;
  }

  .el-table__inner-wrapper::before {
    height: 0;
  }

  .el-button--primary.is-active,
  .el-button--primary:active {
    // background: rgb(230, 162, 60);
    border-color: #4d94f6;
    color: #888bbd;
  }

  .el-button--primary:focus,
  .el-button--primary:hover {
    // background: rgb(230, 162, 60);
    border-color: #4d94f6;
    color: #888bbd;
  }
}

.statistic3 {
  width: 100%;
  height: 150px;
  background: #ffffff;
  //border-radius: 8px;
  // margin-top: ;
  margin: 10px auto;
  padding: 20px;
}

// .top-4{

// }
.top-5 {
  margin-top: 30px;
  display: flex;
}

.shu {
  width: 2px;
  height: 52px;
  background: linear-gradient(180deg, #6675ff 0%, #c1c7ff 100%);
  //border-radius: 0px;
}

.shu-1 {
  // width: 94px;
  height: 35px;
  font-family: DIN Alternate;
  font-weight: bold;
  font-size: 30px;
  color: #333333;
  margin-top: -5px;
  margin-left: 10px;
  // line-height: 0px;
}

.shu-2 {
  // width: 56px;
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #a9b1be;
  margin-top: 5px;
  margin-left: 10px;
  // line-height: 0px;
}

.statistic4 {
  width: 100%;
  // height: 754px;
  background: #ffffff;
  //border-radius: 8px;
  // margin-top: ;
  margin: 10px auto;
  padding: 20px;
}

.rm-bnt {
  // width:100%;
  // font-size: 90%;
  height: 32px;
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 0 10px;
  line-height: 32px;
}

.statistic5 {
  background-color: #fff;
  //border-radius: 8px;
  // margin-top: ;
  // margin: 20px auto;
  padding: 20px 0;
}

.dt-left {
  width: 60%;
}

.dt-right {
  padding: 50px 0 0 32px;
  width: 40%;
  border-left: 1px solid #dddddd;
  position: relative;
}

.tk {
  width: 100%;

  display: flex;
}

.tk-left {
  width: 450px;
  margin: 0 50px;
}

.tk-right {
  width: 450px;
  border-left: 1px solid #dddddd;
  // margin:0 50px;
}

.tk-1 {
  height: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 22px;
  color: #333333;
  text-align: center;
     margin-bottom: 10px;
  margin-top: 50px;
  // line-height: 34px;
}

.tk-2 {
  height: 110px;
  line-height: 28px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  text-align: left;

  // line-height: 34px;
}

.tk-3 {
  margin-top: 50px;
  display: flex;
  // line-height: 34px;
}

.tk-4 {
  width: 120px;
  height: 190px;
  border: 1px solid #dddddd;

  padding: 25px 13px;
}

.tk-5 {
  width: 70px;
  height: 70px;
  margin-left: 12px;

  // padding:0 12px;
  img {
    width: 100%;
    height: 100%;
  }
}

.tk-6 {
  text-align: center;
  margin-top: 20px;
}

.tk-7 {
  // width: 400px;
  height: 44px;
  background: #e6e9ff;
  //border-radius: 4px;
  line-height: 44px;
  text-align: center;
  margin-top: 60px;
}

:deep() {
  .sbmc {
    width: 160px;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 溢出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
  }

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    height: 600px;
  }
  .table{
  width: 100% !important;
}

}
.ant-layout-content{
 height: 0px !important;
}
.qx {
  width: 40px;
  height: 40px;
  float: right;

  img {
    width: 100%;
    height: 100%;
  }
}

.name {
  width: 100%;
  height: 40px;
  display: flex;
  margin-top: 44px;

  img {
    width: 14px;
    height: 14px;
    margin-top: 13px;
  }

  border-bottom: 1px solid #dddddd;
}

.tk-8 {
  // width: 420px;
  height: 44px;
  background: #f43107;
  //border-radius: 4px;
  margin-top: 60px;
  text-align: center;
  line-height: 44px;
  color: #fff;
}

.statistic6 {
  width: 100%;
  // background: #FFFFFF;
  //border-radius: 8px;
  // margin-top: ;
  margin: 0 auto;
  // padding: 20px 0;
}

.checkeds {
  background-color: red;
  text-align: center;
  color: #ffffff;
  padding: 0 10px;
  line-height: 32px;
  font-size:16px;
  cursor: pointer;
  // font-size: calc(100vw * 16 / 1920);
  border-radius: 6px;
}

.bnt{
  cursor: pointer;
}
.xq {
  position: absolute;
  right: 0;
}

.paih {
  position: absolute;
  right: 108px;
}

.rm-bnt .btn {
  // width:%;
  height: 32px;
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px !important;
  // font-size:calc(100vw * 24 / 1920);
}

</style>
